<template>
  <div class="chat_box_6">
    <dv-border-box-7 :color="['#2EC8ED', '#2EC8ED']">
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="改造情况" />
        <div class="chat_box_content">
          <div class="flex-x-center flex-content-around number_box">
            <div class="number_1 flex-x-center flex-col">
              <span class="text_1">人/年</span>
              <span class="text_2">{{ activityNum }}</span>
              <span class="text_3">通过</span>
            </div>
            <div class="number_2 flex-x-center flex-col">
              <span class="text_1">人/年</span>
              <span class="text_2">{{ activityJoinNum }}</span>
              <span class="text_3">参与总数</span>
            </div>
          </div>
          <div id="chat11" class="chart_box" />
        </div>
      </template>
    </dv-border-box-7>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleBox from "./title_box.vue";
export default {
  components: { TitleBox },

  data() {
    return {
      loading: false,
      activityNum: 0,
      activityJoinNum: 0,
      localData: [],
      barData1: [],
      barData2: [],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      // try {
      //   this.loading = true;
      //   const { data } = await reqChartData6();
      //   this.activityNum = data.question_num;
      //   this.activityJoinNum = data.question_join_num;
      //   this.localData = data.local;
      //   this.barData1 = data.data[0];
      //   this.barData2 = data.data[1];
      //   this.loading = false;

      //   this.$nextTick(() => {
      //     this.initChart1();
      //   });
      // } catch (error) {
      //   this.loading = false;
      // }

      this.$nextTick(() => {
        this.initChart1();
      });
    },

    initChart1() {
      var myChart = echarts.init(document.getElementById("chat11"));
      const options = {
        tooltip: {
          trigger: "axis",
        },

        grid: [
          {
            top: "5%",
            bottom: "5%",
            left: "10%",
            right: "0%",
            width: "39%",
          },
          {
            top: "5%",
            bottom: "5%",
            right: "10%",
            left: "49%",
            width: "39%",
          },
        ],

        xAxis: [
          {
            type: "value",
            boundaryGap: false,
            inverse: true,
            position: "right",
            axisTick: {
              show: false,
            },
            splitLine: { show: false },
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#fff",
                width: 1, // 这里是为了突出显示加上的
              },
            },
          },
          {
            type: "value",
            gridIndex: 1,
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            splitLine: { show: false },
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#fff",
                width: 1, // 这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            position: "right",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              fontSize: 10,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1, // 这里是为了突出显示加上的
              },
            },
            data: ["A区", "B区", "C区", "D区", "A区", "B区", "C区", "D区"],
            // data: this.localData,
          },
          {
            type: "category",
            position: "left",
            gridIndex: 1,
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1, // 这里是为了突出显示加上的
              },
            },
            // data: this.localData,
            data: ["A区", "B区", "C区", "D区", "A区", "B区", "C区", "D区"],
          },
        ],
        series: [
          {
            name: "发布数",
            type: "bar",
            label: {
              formatter: "{b}: {@score}",
              color: "#fff",
              show: true,
              position: "end",
            },
            hoverAnimation: false,
            itemStyle: {
              normal: {
                show: true,
                color: "#2EC8ED",
              },
            },
            data: this.barData1.map((item) => {
              return { value: item, label: { show: item > 0 } };
            }),
            // data: [100, 90, 80, 70, 60, 50, 40, 30],
          },
          {
            name: "参与数",
            type: "bar",
            label: {
              formatter: "参与 {@score}",
              color: "#fff",
              show: true,
              position: "insideRight",
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                show: true,
                color: "#037DEF",
              },
            },
            // data: this.barData2.map((item) => {
            //   return { value: item, label: { show: item > 0 } };
            // }),
            data: [80, 70, 60, 50, 40, 30, 20, 10],
          },
        ],
      };

      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_6 {
  z-index: 99;
  position: absolute;

  box-sizing: border-box;
  padding: 10px;

  position: absolute;
  right: 2vw;
  top: 28vh;
  width: 28%;
  height: 34vh;
  .chat_box_content {
    width: 100%;
    height: calc(34vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }

  .chart_box {
    height: 60%;
    width: 100%;
  }

  .number_box {
    width: 100%;
    height: 35%;
    margin-top: 2vh;
  }

  .number_1 {
    color: #80e6ff;
    background-image: url("@/assets/icons/img_green.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .number_2 {
    color: #669dff;
    background-image: url("@/assets/icons/img_blue.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .number_3 {
    color: #ffba69;
    background-image: url("@/assets/icons/img_yellow.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .text_1 {
    font-size: 0.4vw;
  }
  .text_2 {
    margin-top: 1vh;
    font-size: 1.4vw;
  }
  .text_3 {
    margin-top: 1vh;
    color: white;
    font-size: 0.4vw;
  }
}
</style>
